<template>
  <div>
    <el-upload
      :class="{disabled: isDisabled}"
      action=""
      list-type="picture-card"
      :file-list="fileList"
      :limit="limit"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :http-request="handleUpload"
      :on-change="handleChange"
      :before-upload="handleBeforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 预览图片对话框 -->
    <el-dialog title="预览大图" :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

    <!-- 进度条 -->
    <el-progress
      :text-inside="true"
      :stroke-width="26"
      :percentage="percentage"
      style="width:200px; height: 30px;"
    />
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
const cos = new COS({
  SecretId: 'AKIDgCTVIq9C0YqtgEWZNvEI6ex0oMfiV2JO',
  SecretKey: 'tZ0C9qIUQ7ZlhOp0wc2D8nDNIxNXYP3S'
})

export default {
  name: 'UploadImage',
  props: {
    // 1. 外部告知能展示几张图片
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      // 1. 预览图片的对象数组
      fileList: [
        { url: 'https://img1.baidu.com/it/u=4216761644,15569246&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500' },
        { url: 'https://img0.baidu.com/it/u=18497219,172601761&fm=253&fmt=auto&app=138&f=PNG?w=519&h=500' }
      ],
      // 2. 预览图片的地址
      dialogImageUrl: '',
      // 3. 显示/隐藏对话框
      dialogVisible: false,
      // 4. 进度条进度
      percentage: 0
    }
  },
  computed: {
    // 1. 动态控制上传按钮的显示和隐藏
    isDisabled() {
      // 如果文件列表的个数 >= 外部传入的限制个数, 就应该隐藏
      return this.fileList.length >= this.limit
    }
  },
  methods: {
    // 1. 点击预览图片
    handlePictureCardPreview(file) {
      // console.log(file)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 2. 点击垃圾篓删除
    handleRemove(file, fileList) {
      // console.log(file, fileList)
      // 不建议直接赋值
      // this.fileList = fileList

      // 方式一: 直接复制数组中的对象
      // this.fileList = [...fileList]

      // 方式二: 直接从原数组中去过滤(推荐)
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
    },
    // 3. 自定义上传
    handleUpload(obj) {
      // 3.0 从自己的数据数组中找到上传的对象
      const uid = obj.file.uid
      const file = this.fileList.find(item => item.uid === uid)

      // 3.1 调用腾讯云的接口函数实现文件上传
      cos.putObject({
        Bucket: '101-hrsass-1312445828', /* 必须 */
        Region: 'ap-shanghai', /* 存储桶所在地域，必须字段 */
        Key: `101-hrsass-${+new Date()}-${obj.file.name}`, /* 必须, 上传文件的名称 */
        StorageClass: 'STANDARD',
        Body: obj.file, // 上传文件对象
        // 获取文件上传进度
        onProgress: (progressData) => {
          // console.log(progressData)
          this.percentage = parseInt(progressData.percent * 100)
        }
      }, (err, data) => {
        if (err) {
          this.$message.error('图片上传失败')
          return
        }
        // 3.2 后续处理 更新本地图片对象的 status 和 url
        // console.log(data)
        file.status = 'success'
        file.url = 'https://' + data.Location
      })
    },
    // 4. 当本地上传文件时(同步数组数据)
    handleChange(file, fileList) {
      // console.log(file)
      // console.log(fileList)
      // 同步最新的文件数组给组件中的文件数组
      this.fileList = [...fileList]
    },
    // 5. 上传前文件的格式和大小校验
    handleBeforeUpload(file) {
      // console.log('上传前', file)

      // 5.1 限制上传图片文件的大小为2MB以内
      const isLt2M = file.size / 1024 / 1024 <= 2

      // 5.2 处理并返回结果
      if (!isLt2M) {
        this.$message.warning('上传的图片大小不能超过2MB!')
        return false
      }

      // 5.3 通过校验
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
  .disabled {
    // 深度穿透选择器
    ::v-deep {
      .el-upload--picture-card{
        display: none;
      }
    }
  }
</style>
